<template>
	<view class="content">
		<view class="user">
			<img class="uni-image" src="/static/people.png" alt="">
			<text class="username">李默 妈妈</text>
			 <navigator url="/pages/family/family" open-type="navigate" class="manage">成员管理</navigator>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		
		<view class="appraise">
			<view class="uni-navBar">
				<button>评价记录</button>
				<button>排行榜</button>
				<button>颁发</button>
			</view>
			
			<view class="today">
				<view class="title">今日</view>
				<view class="system">
					<img class="uni-image" src="/static/people.png" alt="">
					<view class="text">
						<text class="text1">张一</text><br>
						<text class="text2">4月11日 12:24</text>
					</view>
				</view>
				<view class="tag">
					<uni-tag class="mother" text="#妈妈" type="" @click="bindClick"></uni-tag>		
				</view>

				<view class="van-font">
					<text class="van-text1">获得一枚铜奖章</text>
					<view class="reason">
						<view class="van-icon"></view>
						<text class="van-text2">获得理由：善良大方，诚实好学，乐于帮助同学</text>
					</view>
					<text class="van-text3">显示全部</text>
				</view>
				<view class="van-show">
					<svg t="1658907740438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3146" width="200" height="200"><path d="M352.898 618.523C327.316 641.806 293.316 656 256 656c-79.529 0-144-64.471-144-144s64.471-144 144-144c37.082 0 70.89 14.017 96.416 37.04L583 252.479c-4.544-14.008-7-28.956-7-44.478 0-79.529 64.471-144 144-144s144 64.471 144 144-64.471 144-144 144c-38.01 0-72.58-14.726-98.315-38.785l-229.507 151.85C397.248 479.778 400 495.568 400 512c0 16.204-2.677 31.783-7.612 46.32l230.714 151.157C648.684 686.194 682.684 672 720 672c79.529 0 144 64.471 144 144s-64.471 144-144 144-144-64.471-144-144c0-16.204 2.677-31.783 7.612-46.32L352.898 618.524z" fill="#5090F1" p-id="3147"></path><path d="M720 280c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72zM720 888c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72zM256 584c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72z" fill="#FFFFFF" p-id="3148"></path></svg>
					<text class="van-text4">分享</text>
					<text class="van-text5">已读 12/35</text>
				</view>
		</view>
		
		</view>
		<view class="today">
				<view class="system">
					<img class="uni-image" src="/static/people.png" alt="">
					<view class="text">
						<text class="text1">张一</text><br>
						<text class="text2">4月11日 12:24</text>
					</view>
				</view>
				<view class="tag">
					<uni-tag class="mother" text="#爸爸" type="" @click="bindClick"></uni-tag>		
				</view>
		
				<view class="van-font">
					<text class="van-text1">获得一枚铜奖章</text>
					<view class="reason">
						<view class="van-icon"></view>
						<text class="van-text2">获得理由：善良大方，诚实好学，乐于帮助同学</text>
					</view>
					<text class="van-text3">显示全部</text>
				</view>
				<view class="van-show">
					<svg t="1658907740438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3146" width="200" height="200"><path d="M352.898 618.523C327.316 641.806 293.316 656 256 656c-79.529 0-144-64.471-144-144s64.471-144 144-144c37.082 0 70.89 14.017 96.416 37.04L583 252.479c-4.544-14.008-7-28.956-7-44.478 0-79.529 64.471-144 144-144s144 64.471 144 144-64.471 144-144 144c-38.01 0-72.58-14.726-98.315-38.785l-229.507 151.85C397.248 479.778 400 495.568 400 512c0 16.204-2.677 31.783-7.612 46.32l230.714 151.157C648.684 686.194 682.684 672 720 672c79.529 0 144 64.471 144 144s-64.471 144-144 144-144-64.471-144-144c0-16.204 2.677-31.783 7.612-46.32L352.898 618.524z" fill="#5090F1" p-id="3147"></path><path d="M720 280c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72zM720 888c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72zM256 584c39.765 0 72-32.235 72-72s-32.235-72-72-72-72 32.235-72 72 32.235 72 72 72z" fill="#FFFFFF" p-id="3148"></path></svg>
					<text class="van-text4">分享</text>
					<text class="van-text5">已读 12/35</text>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
/* 用户 */
.user {
	
    height: 160rpx;
    background-color: white;
    padding: 0 40rpx;
    display: flex;
    align-items: center; 
	position: relative;
}
/* 头像 */
.uni-image {
	height: 100rpx;
}
/* 用户名 */
.username {	
	margin-left: 40rpx;	
	
}
.manage {
	color: #5664f0;
	margin-left: 230rpx;
	font-size: 28rpx;
}
.arrowright { 
	position: absolute;
	right: 30rpx;
	bottom: 57rpx;
	color: #5664f0 !important;
}
/* 评价区 */
/* 导航 */
.uni-navBar {
	margin-top: 120rpx;
	height: 100rpx;
	background-color: white;
	display: flex;
    align-items: center;	
	padding-right: 200rpx;
	padding-left: 30rpx;
	border-bottom: 1px dashed #bbbbbb;
}
button {
	width: 160rpx;
	height: 50rpx;
	font-size: 20rpx;
	line-height: 50rpx;
	background-color: #eaeaea;
	color: #5c5c5c;
}
button:hover {
	color: #5664f0;
}
/* 今日分享 */
.today {
	height: 500rpx;
	background-color: #fff;
	padding-top: 5rpx;
	margin-bottom: 48rpx;;
}
.title {
	font-weight: 900;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	margin-left: 30rpx;
}
/* 系统消息时间 */
.system {
	margin-left: 30rpx;
	height: 100rpx;
}
.text {
	display: inline-block;
	height: 100rpx;
	position: relative;
	margin-left: 20rpx;
}
.text1 {
	position: absolute;
	top: -28rpx;	
	font-weight: 800;
}
.text2 {
	font-size: 20rpx;
	color: #a09f9e;
}
/* 系统下的tag */
.tag {
	margin-left: 30rpx;
	margin-top: 20rpx;
	height: 40rpx;
	width: 250rpx;
	justify-content: space-around;
	background-color: #fff;
	margin-bottom: 60rpx;
}
.mother {
	background-color: #df7454 !important;
	width: 140rpx !important;
	color: #fff !important;
	border: none !important;
}
/* 奖章 */
.van-text1 {
	margin-left: 30rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}
/* 获得理由 */
.reason {
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
    position: relative;
}
.van-icon {
	width: 15rpx;
	height: 15rpx;
	border-radius: 7.5rpx;
	background-color: #6878f8;
	margin-left: 10rpx;
	position: absolute;
	top: 47rpx;
}
.van-text2 {
	font-size: 24rpx;
	position: absolute;
	left: 35rpx;
	color: #70706e;
}
/* 显示全部 */
.van-text3 {
	color: #70706e;
	margin-left: 30rpx;
}
/* 分享已读 */
.van-show {
	height: 60rpx;
	line-height: 60rpx;
	background-color: white;
	border-top: 1px dashed #bbbbbb;
	position: relative;
	margin-bottom: 0rpx;
}
.icon {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 30rpx;
	top: 10rpx;
}
.van-text4 {
	margin-left: 80rpx;
	color: #6878f8;
}
.van-text5 {
	margin-left: 400rpx;
	color: #70706e;
}
	
</style>
